<template>
  <div class="container">
    <div class="delivery-info">
      <div class="text">
        <span class="title">共{{info.wait_cycle_count}}期：已配送{{info.delivery_cycle_count}}期</span>
        <span class="more-log" @click="toggleDateDetail">
          送达日志
          <i class="down" ></i>
        </span>
      </div>
      <div class="more-cycle" v-show="isShowDateDetail">
        <div class="item" v-for="date in dateList">
          <div class="cycle">
            {{date.time}}
          </div>
          <div class="label">
            {{date.label}}
          </div>
        </div>
      </div>
    </div>
    <div class="goods-info">
      <div class="goods">
        <div class="goods-img">
          <img :src="info.pic_url+'180x180'"  v-if="info.is_compress">
          <img :src="info.pic_url"  v-else> 
        </div>
        <div class="goods-text">
          <div class="goods-title">
            {{info.item_title}}
          </div>
          <div class="item-tips-box">
            <span class="item-tips fontZhouQG">周期购</span>
          </div>

          <div class="price-scale" v-if="info.price_arr">
            <span class="unit">¥</span>
            <span class="num-font">{{info.price_arr[0]}}.</span>
            <span class="num-back">{{info.price_arr[1]}}</span>
          </div>
          <!-- <div class="flag">
            <span>周期购</span>
          </div> -->
        </div>
        <div class="goods-num">
          <span class="icon">x{{info.num}}</span>
        </div>
      </div>
      <div v-if="expressInfo.express_name">
        <div class="delivery-base">
          <span>共{{info.num}}件商品，由【{{expressInfo.express_name}}】承运</span>
        </div>
        <div class="delivery-detail">
          <div class="item">
            <span class="label">快递信息：</span>
            <span class="text">{{expressInfo.express_name}}</span>
          </div>
          <div class="item">
            <span class="label">快递单号：</span>
            <span class="text">{{expressInfo.order_no}}</span>
            <span class="copy-btn">复制</span>
          </div>
        </div>        
      </div>
    </div>

    <div class="item-block">
      <ul class="logistics-detail" v-if="expressInfoList.length>0" :class="showMore?'show':'hide'">
        <li class="item" v-for="(item, idx) in expressInfoList" :key="idx">
          <div class="item-detail" v-show="showMore || idx<2">
            <div class="line"></div>
            <div class="icon"></div>
            <div class="date-time">
              <div class="date" v-html="getDate(item.time)"></div>
              <div class="time" v-html="getTime(item.time)"></div>
            </div>
            <div class="status-detail">{{item.status}}</div>
          </div>
        </li>
      </ul>
      <div class="more-btn" v-show="expressInfoList.length>2">
        <div class="btn" @click="clickShowMore">
          <span>{{showMore?'收起':'展开'}}</span>
          <i icon-class="icon_right" :class="['icon_right',showMore?'icon_up':'icon_down']"></i>
        </div>
      </div>
    </div>
    <div class="zhezhao" v-show="isShowDateDetail" @click="toggleDateDetail"></div>
  </div>
</template>

<script>
import { cycleLogisticsInfo, getExpressInfo } from '@/api/order/order.js'
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      dateList: Object,
      info: Object,
      pay_gift: null,
      wl_info: {},
      isShow: true,
      isShowTeacher: true,
      payCount: 0,
      showMore: false,
      expressInfo: Object,
      expressInfoList: [],
      isShowDateDetail: 0
    }
  },
  created() {
    this.init()
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    toggleDateDetail() {
      if (this.isShowDateDetail == 0) {
        this.isShowDateDetail = 1
      } else {
        this.isShowDateDetail = 0
      }
    },
    JumpUrl(url, data) {
      window.location.href = url
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    closeMyTeacher() {
      this.isShowTeacher = false
    },
    closePop() {
      this.isShow = false
    },
    init() {
      const data = {
        id: this.$route.query.id
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      cycleLogisticsInfo(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.info = res.data.info
          this.info.price_arr = this.info.current_price.split('.')
          this.dateList = res.data.date_list
          getExpressInfo({ id: this.info.order_cycle_send_id, type: 8 }).then(res => {
            if (res.status == 1) {
              this.expressInfo = res.data
              this.expressInfoList = res.data.result.list
              // console.log(this.expressInfo)
              // console.log(this.expressInfoList)
            } else {
              this.$Error(res.msg)
            }
          })
        } else {
          this.$Error(res.msg)
        }
      })
    },
    clickShowMore() {
      this.showMore = !this.showMore
      // const type = this.expressInfoList[index].showMore
      // const item = this.expressInfoList[index]
      // item.showMore = !type
      // Vue.set(this.expressInfoList, index, item)
    },
    getDate(time) {
      const date = time.substr(5, 5)
      return date
    },
    getTime(time) {
      const date = time.substr(11, 5)
      return date
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin';
@import "src/styles/variables";
.container{
  width: 100%;
  
  .delivery-info{
    border-radius: 0px 0px 20px 20px;
    padding: 0 30px;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    z-index: 2;
    .text{
      width: 100%;
      height: 96px;
      .title{
        font-size: 26px;
        color: #333333;
        line-height: 96px;
        float: left;
      }
      .more-log{
        color: #666666;
        float: right;
        font-size: 24px;
        line-height: 96px;
      }
      .down{
        float: right;
        width: 16px;
        height: 10px;
        margin-top: 43px;
        margin-left: 6px;
        background:url(https://img.wifenxiao.com/h5-wfx/images/down.png) center/cover no-repeat;
      }
    }
    .more-cycle{
      height: 194px;
      padding-top: 14px;
      z-index: 1;
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
      .item{
        display:inline-block;
        margin-right: 46px;
        width: 92px;
        .cycle{
          width:92px;
          height:92px;
          background:#FFEAEC;
          border-radius:50%;
          line-height: 92px;
          text-align: center;
          font-size: 24px;
          color: #F21228;
        }
        .label{
          font-size: 24px;
          color: #F21228;
          text-align: center;
          margin-top: 12px;
        }
      }
    }
    .more-cycle::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
  }
  .goods-info{
    border-radius:20px;
    margin:20px 0;
    background-color: #ffffff;
    padding: 40px 30px;
    .goods{
      overflow: hidden;
      position: relative;
      .goods-img{
        img{
          width: 160px;
          height: 160px;
        }
        float: left;
      }
      .item-tips-box{
        margin-top:16px;
        .item-tips{
          // @include alignTop;
          font-size: 20px;
          line-height: 24px;
          padding: 5px 12px;
          background: #ddd;
          margin-right: 10px;
          margin-bottom: 12px;
          border-radius: 24px;
          &.fontZhouQG{
            @include btnGroup($fontZhouQG, $bgZhouQG);
          }
        }
      }
      .goods-text{
        float: left;
        margin-left: 20px;
        .goods-title{
          font-weight: bold;
          font-size: 26px;
          color:#333333;
          width: 390px;
          line-height: 34px;
        }
        .price-scale{
          margin-top: 8px;
          font-weight: bold;
        }
        .flag{
          margin-top: 10px;
          span{
            background-color: #F21228;
            font-size: 22px;
            color: #ffffff;
            padding: 8px 11px;
            display: inline-block;
            border-radius: 6px;
          }
        }
      }
      .goods-num{
        height: 160px;
        text-align: center;
        line-height: 160px;
        float: left;
        font-size: 28px;
        color: #333333;
        float: right;
      }
    }
    .delivery-base{
      margin-top: 30px;
      font-size: 26px;
      color: #999999;
    }
    .delivery-detail{
      margin-top: 40px;
      .item{
        margin-top: 30px;
        .label{
          width: 120px;
          font-size: 24px;
          color: #333333;
          text-align-last: justify;
          display: inline-block;
        }
        .text{
          font-size: 26px;
          font-weight: bold;
          color: #333333;
        }
        .copy-btn{
          font-size: 22px;
          color: #333333;
          background-color: #EDEDED;
          width: 66px;
          height: 32px;
          border-radius: 16px;
          display: inline-block;
          text-align: center;
          line-height: 32px;
          margin-left: 10px;
        }
      }
    }
  }

  .item-block{
    margin-bottom: 20px;
    padding: 30px;
    background: #fff;
    border-radius: 20px;
    font-size: 26px;
    line-height: 40px;
  }

  //物流信息
  .logistics-detail{
    position:relative;
    overflow: hidden;
    padding-right:30px;
    .item{
      position:relative;
      color:#666;
      .icon{
        position:absolute;
        top:14px;
        left:132px;
        width:14px;
        height:14px;
        background:#D8D8D8;
        border-radius:50%;
      }
      .line{
        position:absolute;
        top:14px;
        left:136px;
        width:4px;
        height:100%;
        border-right:2px dashed #D8D8D8;
      }
      .item-detail{
        display:flex;
        padding-bottom:60px;
      }
      &:first-child{
        .item-detail{
          color:#333;
          .icon{
            left:129px;
            width:20px;
            height:20px;
            background:#F21228;
            box-shadow:0px 5px 10px 0px rgba(242,18,40,0.15);
          }
        }
      }
      &:last-child{
        .item-detail{
          padding-bottom:0;
        }
        .line{
          display:none;
        }
      }
      .date-time{
        width:100px;
        margin-right:76px;
        text-align:center;
        .date{
          font-size:28px;
        }
        .time{
          font-size:24px;
          color:#666;
        }
      }
      .status-detail{
        flex:1;
      }
    }
    &.hide{
      .item{
        &:nth-child(2){
          .item-detail{
            padding-bottom:0;
          }
        }
      }
    }
  }
  .more-btn{
    margin-top:40px;
    text-align:center;
    .btn{
      display:inline-block;
      font-size:28px;
      color:#666;
    }
    .icon_down{
      width:24px;
      transform: rotate(90deg);
    }
    .icon_up{
      width:24px;
      transform: rotate(-90deg);
    }
  }
  .zhezhao{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
  }
}
</style>